<!--
 * @Author: hpc(hepch)
 * @Date: 2021-04-26 11:46:49
 * @LastEditors: 杨光辉(GerhardYang)
 * @LastEditTime: 2021-07-07 13:40:32
 * @Description: file content
 * @Copyright: 超图软件华中平台客户中心 (SuperMap Software Co., Ltd. -Central China Platform)
-->

<template>
  <div v-show="visible">
    <a-divider>日历检索</a-divider>
    <a-spin v-show="loading" size="large" tip="数据正在查询中······">
      <div
        class="spin-content"
        style="
          width: 100%;
          min-height: 288px;
          margin-top: 12px;
          border: 1px solid #91d5ff;
          background-color: #e6f7ff;
        "
      ></div>
    </a-spin>

    <div class="search-result-card" v-show="!loading">
      <a-calendar
        :fullscreen="false"
        @panelChange="onPanelChange"
        :validRange="rangeValue"
        @select="select"
        :disabledDate="disabled"
        :defaultValue="defaultValue"
      >
      </a-calendar>
    </div>
    <vehicle-track-result
      :secondsearchInfo="secondsearchInfo"
      ref="VehicleTrackResult"
    />
  </div>
</template>

<script>
import moment from "moment";
import VehicleTrackResult from "./VehicleTrackResult.vue";
//import SuspendedSearchResult from "./SuspendedSearchResult.vue";
export default {
  components: { VehicleTrackResult },
  data() {
    return {
      visible: false,
      startDate: "",
      endDate: "",
      rangeValue: null,
      defaultValue: null,
      alldata: [],
      loading: true,
    };
  },
  props: ["secondsearchInfo"],
  computed: {
    map() {
      return this.$store.state.map;
    },
  },

  mounted() {},
  methods: {
    hsdatafirst() {},
    /**
     * @description: 根据年月日构造树
     * @param {Array} reyear
     * @return {Object}treedata
     */

    array2Tree(reyear) {
      var treedata = reyear;
      for (let j = 0; j < reyear.length; j++) {
        var remonth = this.regroup(reyear[j].data, "imageMonth");
        treedata[j].children = remonth;
        for (let i = 0; i < remonth.length; i++) {
          var redays = this.regroup(remonth[i].data, "imageDay");
          treedata[j].children[i].children = redays;
        }
      }

      return treedata;
    },
    /**
     * @description:年模式和月模式切换
     * @param {moment} moment
     * @param {string} mode
     * @return {string}
     */

    onPanelChange(moment, mode) {
      this.$emit("child-AllmapsData", { mode: "", data: [] });
      this.mode = mode;
    },
    /**
     * @description:设置日期是否可选，在树中查询年月日实现
     * @param {moment} moment
     * @return {boolean}
     */

    disabled(moment) {
      let date = moment._d;
      let month = date.getMonth() + 1;
      let year = date.getFullYear();
      let day = date.getDate();
      // var dataM = this.alldata.filter((item) => year == item.id)[0].children;
      for (let i = 0; i < this.alldata.length; i++) {
        if (year == this.alldata[i].id) {
          var dataM = this.alldata[i].children;
          break;
        }
      }
      if (!dataM) {
        return true;
      }
      //当前模式
      if (this.mode == "year") {
        for (let i = 0; i < dataM.length; i++) {
          if (month == dataM[i].id) {
            return false;
          }
          if (dataM.length - 1 == i) {
            return true;
          }
        }
      }
      for (let i = 0; i < dataM.length; i++) {
        if (month == dataM[i].id) {
          var dataD = dataM[i].children;
          break;
        }
      }

      if (!dataD) {
        return true;
      }
      //查找某天是否有数据，有数据返回false，没有数据返回true(不可选中)
      for (let i = 0; i < dataD.length; i++) {
        if (day == dataD[i].id) {
          return false;
        }
        if (dataD.length - 1 == i) {
          return true;
        }
      }
    },
    /**
     * @description: 选中日期获取当前日期的日新图列表数据
     * @param {moment} value
     * @return {array}
     */
    select(value) {
      let date = value._d;
      let month = date.getMonth() + 1;
      let year = date.getFullYear();
      let day = date.getDate();
      let arrayM = this.alldata.filter((item) => item.id == year)[0];
      if (this.mode == "year") {
        let monthhsdata = [];
        arrayM.children
          .filter((item) => item.id == month)[0]
          .children.map((item) =>
            item.data.map((item) => monthhsdata.push(item))
          );
        let obj = { mode: "year", data: monthhsdata };

        this.$refs.VehicleTrackResult.buildTableData(obj.data);
        this.$refs.VehicleTrackResult.tableloading = true;
      } else {
        let arrayD = arrayM.children
          .filter((item) => month == item.id)[0]
          .children.filter((item) => day == item.id)[0];
        this.secondsearchInfo.startDate = value;
        this.secondsearchInfo.endDate = value;

        this.$refs.VehicleTrackResult.buildTableData(arrayD.data);
        this.$refs.VehicleTrackResult.tableloading = true;
        this.$refs.VehicleTrackResult.drawTrack(arrayD.data);
      }
    },
    /**
     * @description: 处理从axios返回的日新图数据，添加日期字段（imageYear.....） 构建树结构
     * @param {array} data
     * @return {json}
     */

    dataInfoTree: function (data) {
      if (data.length) {
        data.map((item) => {
          let timestamp = new Date(item.timestamp * 1);

          item.imageYear = timestamp.getFullYear();
          item.imageMonth = timestamp.getMonth() + 1;
          item.imageDay = timestamp.getDate();
        });
      }
      this.defaultValue = moment(data[0].timestamp * 1);
      var reyear = this.regroup(data, "imageYear");
      this.alldata = this.array2Tree(reyear);
      console.log(
        "开始日期",
        new Date(this.startDate * 1).toLocaleDateString(),
        "结束日期",
        new Date(this.endDate * 1).toLocaleDateString()
      );
      console.log("添加日期后的数据", this.alldata);
      this.rangeValue = [moment(this.startDate), moment(this.endDate)];
      let self = this;
      setTimeout(function () {
        self.loading = false;
      }, 1000);
    },
    /**
     * @description: 根据年月日重分类，便于构建数据树
     * @param {array} arr 重分类的数组
     * @param {string} str 年月日字段名称
     * @return {array}
     */
    regroup(arr, str) {
      var map = {},
        dest = [];
      arr.map((item) => {
        if (!map[item[str]]) {
          dest.push({
            id: item[str],
            data: [item],
          });
          map[item[str]] = item;
        } else {
          dest.filter((itemD) => itemD.id == item[str])[0].data.push(item);
        }
      });
      return dest;
    },

    onClose() {
      this.alldata = [];
      this.visible = false;
    },
  },
};
</script>

<style lang="less" scoped>
.search-result-card {
  border: 1px solid #e8e8e8;
  /deep/ .ant-fullcalendar-cell {
    .ant-fullcalendar-date {
      padding: 0 0px !important;
      background-color: #1890ff !important;
      .ant-fullcalendar-value {
        color: #fff;
      }
      .ant-fullcalendar-value:hover {
        background-color: transparent !important;
      }
    }
  }
  /deep/.ant-fullcalendar-month-panel-selected-cell {
    .ant-fullcalendar-value {
      color: #fff;
      background: #1890ff;
      width: 100%;
    }
  }
  /deep/.ant-fullcalendar-disabled-cell,
  /deep/.ant-fullcalendar-last-month-cell,
  /deep/ .ant-fullcalendar-next-month-btn-day {
    .ant-fullcalendar-date {
      background-color: #ddd !important;
      .ant-fullcalendar-value {
        background-color: transparent !important;
      }
    }
  }
  /*横向时间轴*/
}
/deep/.ant-card-body {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
/deep/.ant-tabs-bar {
  margin: 0 !important;
}
/deep/.ant-table-pagination.ant-pagination {
  margin: 0px 0 !important;
  float: right;
}
/deep/.ant-table-body {
  overflow-x: scroll;
}
/deep/.ant-fullcalendar-header .ant-radio-group {
  margin-left: 8px;
  text-align: left;
  display: none;
}
</style>
